<template>
  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @apiTest="mytest"
    @showResult="showResult">

      <div slot="header">
        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch">
          <template slot="suffix">
            <el-dropdown split-button type="primary" size="small">
              请选择测试环境
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in evn_list" :key="index" @click.native="handleClick(item)">
                  {{ item.env_name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-tag style="margin-left: 10px">{{ select_env }}</el-tag>
          </template>
        </crud-search>
        <el-button-group>
        <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
        <el-button size="small" type="danger" @click="batchDelete"><i class="el-icon-delete"></i> 批量删除</el-button>
          <el-button
            size="small"
            type="warning"
            @click="onExport"
            ><i class="el-icon-download" /> 导出
          </el-button>
          <importExcel
            api="/api/testinfo/"
            >导入
          </importExcel>
             </el-button-group>
        <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
      </div>
      <span slot="PaginationPrefixSlot" class="prefix">
                <el-button class="square" size="mini" title="批量删除" @click="batchDelete" icon="el-icon-delete"
                           :disabled="!multipleSelection || multipleSelection.length===0"/>
            </span>
    </d2-crud-x>
   <div>
      <el-drawer
        title="测试结果"
        :visible.sync="resultShow"
        direction="rtl"
        size="70%"
        >
        <div>
          <api_result v-if="resultShow" :api-obj="apiObj"></api_result>
        </div>
      </el-drawer>
    </div>

  </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import * as api from './api'
import * as env_api from '@/views/api_envinfo/api'
import api_result from '@/views/api_result'
// import { apiTest } from './api'

export default {
  name: 'api_testinfo',
  components: { api_result },
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      evn_list: [],
      select_env: '没有选择环境',
      select_obj: undefined,
      resultShow: false,
      apiObj: undefined
    }
  },
  mounted () {
    this.env_init()
  },
  methods: {
    env_init () {
      env_api.GetList().then(ret => {
        console.log(ret)
        this.evn_list = ret.data.data
        for (let i = 0; i < this.evn_list.length; i++) {
          const evnItem = this.evn_list[i]
          console.log(evnItem)
          if (evnItem.default === true) {
            this.select_env = evnItem.env_name
            this.select_obj = evnItem
          }
        }
      })
    },
    handleClick (item) {
      console.log('点击了：', item)
      this.select_env = item.env_name
      this.select_obj = item
    },
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      return api.AddObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    batchDelRequest (ids) {
      return api.BatchDel(ids)
    },
    infoRequest (row) {
      return api.GetObj(row.id)
    },
    mytest (scope) {
      console.log('------------')
      console.log(scope.row)
      if (this.select_obj === undefined) {
        this.$message.error('没有选择环境')
        return
      }
      const data = scope.row
      data.env = this.select_obj
      api.apiTest(data).then(rt => {
        this.$message.success(rt.msg)
      }).catch(rt => {
        this.$message.error(rt.msg)
      })
    },
    showResult (scope) {
      this.resultShow = true
      this.apiObj = scope.row
    },
    onExport () {
      const that = this
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        const query = that.getSearch().getForm()
        return api.exportData({ ...query })
      })
    }
  }
}
</script>
